<template>
  <div class="content">
    <el-tabs  v-model="activeName" type="border-card">
      <el-tab-pane label="Reseach" name="Reseach">
        <el-collapse >
          <el-collapse-item title="Flight Control"><FlightControl/></el-collapse-item>
          <el-collapse-item title="Control Theory and Methods"><ControlTheory/></el-collapse-item>
          <el-collapse-item title="Evaluation Theory and Methods"><EvaluationTheory/></el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      
      <el-tab-pane label="Platform" name="Platform">
        <el-collapse >
          <el-collapse-item title="Model-based Rapid Design Platform"><MBD/></el-collapse-item>
          <el-collapse-item title="Automatic Safety Testing Platform for UAV Systems"><AutomaticSafety/></el-collapse-item>
          <el-collapse-item title="Multicopter Evaluation Website"><MulticopterEvaluation/></el-collapse-item>
          <el-collapse-item title="Multicopter Swarm Ground-Based Control Platform"><GroundBased/></el-collapse-item>
          <el-collapse-item title="Visual Sensor Network"><VisualSensor/></el-collapse-item>
          <el-collapse-item title="Aerial Refueling Platform"><AerialRefueling/></el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      

    </el-tabs>
  </div>
</template>

<script>
import FlightControl from "./FlightControl.vue"
import ControlTheory from "./ControlTheory.vue"
import EvaluationTheory from "./EvaluationTheory.vue"

import MBD from "./MBD.vue"
import AutomaticSafety from "./AutomaticSafety.vue"
import MulticopterEvaluation from "./MulticopterEvaluation.vue"
import GroundBased from "./GroundBased.vue"
import VisualSensor from "./VisualSensor.vue"
import AerialRefueling from "./AerialRefueling.vue"

export default {
  components: { 
    FlightControl,ControlTheory,EvaluationTheory,
    MBD,AutomaticSafety,MulticopterEvaluation,GroundBased,VisualSensor,AerialRefueling,
  
  },
  data() {
    return {
      activeName: "Reseach"
    };
  }

};
</script>

<style lang="less" scoped>
  @import "../el-collapse-item.less";
  .el-tabs { min-height: 750px; }
  /deep/.el-tabs__nav{ transform: translateX(400px)!important; text-align: center !important; }
  /deep/.el-tabs__item{font-weight: bold;font-size: 16px;}
</style>
